<template>
  <view class="tree">
    <uni-popup ref="popup">
      <view class="title">
        <view @click="cancel" :style="{ color: cancelColor }">{{ cancelTxt }}</view>
        <view :style="{ color: cluelColor }">{{ clueTxt }}</view>
        <view @click="finish" :style="{ color: finishColor }">{{ finishTxt }}</view>
      </view>
      <view class="pd20">
        <scroll-view class="scroll-view-box" :scroll-y="true">
          <block v-if="nmutiple">
            <checkbox-group @change="checkboxChange" class="checkbox">
              <view class="lists">
                <block v-for="(item) in dataList" :key="item.id">
                  <label class="label">
                    <view class="value" @click.stop="changeShow(item)">
                      <image :style="{ opacity: item[dataChildren].length > 0 ? 1 : 0 }" :src="img[item.isShow ? 1 : 0]"
                        mode="aspactFill">
                      </image>
                      {{ item[dataLabel] }}
                    </view>
                    <view>
                      <checkbox :value="String(item[dataValue])" :checked="item.checked" />
                    </view>
                  </label>
                </block>
              </view>
              <!-- <l-tree-item :dataList.sync="dataList" @changeValue="change" :mutiple="nmutiple"
                :dataChildren="dataChildren"></l-tree-item> -->
            </checkbox-group>
          </block>
          <block v-else>
            <radio-group @change="radioChange" class="radio">
              <view class="lists">
                <block v-for="(item) in dataList" :key="item.id">
                  <label class="label">
                    <view class="value" @click.stop="changeShow(item)">
                      <image :style="{ opacity: item[dataChildren].length > 0 ? 1 : 0 }" :src="img[item.isShow ? 1 : 0]"
                        mode="aspactFill">
                      </image>
                      {{ item[dataLabel] }}
                    </view>
                    <view>
                      <radio :value="String(item[dataValue])" :checked="item.checked" />
                    </view>
                  </label>
                </block>
              </view>
              <!-- <l-tree-item :dataList.sync="dataList" @changeValue="change" :mutiple="nmutiple"></l-tree-item> -->
            </radio-group>
          </block>
        </scroll-view>
      </view>

    </uni-popup>
  </view>
</template>

<script>
// import lTreeItem from "@/components/tree/tree-item"
export default {
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    cancelTxt: {
      type: String,
      default: '取消'
    },
    cancelColor: {
      type: String,
      default: '#000'
    },
    clueTxt: {
      type: String,
      default: '请选择'
    },
    cluelColor: {
      type: String,
      default: '#000'
    },
    finishTxt: {
      type: String,
      default: '完成'
    },
    finishColor: {
      type: String,
      default: 'rgb(28, 169, 255)'
    },
    mutiple: {
      type: Boolean,
      default: false
    },
    dataChildren: {
      type: String,
      default: 'child'
    },
    dataValue: {
      type: String,
      default: 'id'
    },
    dataLabel: {
      type: String,
      default: 'title'
    }
  },
  data() {
    return {
      selectId: [],
      selectArr: [],
      nmutiple: this.mutiple,
      img: ['../../static/img/icon/arrow-s.png', '../../static/img/icon/arrow-down-2.png']
    }
  },
  created() {
  },
  methods: {
    changeShow(item) {
      item.isShow = !item.isShow
      this.$forceUpdate();
    },
    open() {
      this.$refs.popup.open('bottom')
    },
    close() {
      this.$refs.popup.close()
    },
    change(e) {
      this.$forceUpdate();
    },
    finish(e) {
      this.selectArr = []
      this.digui(this.dataList, this.selectId)
      // console.log(this.dataList, this.selectId);
      this.$emit('changeTree', { id: this.selectId, arr: this.selectArr })
      this.$forceUpdate();
    },
    cancel() {
      this.$refs.popup.close()
    },
    checkboxChange(e) {
      this.selectId = e.detail.value;
    },
    radioChange(e) {
      this.selectId = e.detail.value;
    },
    changeType(v) {
      this.nmutiple = v;
    },
    digui(date, select_arr) {
      if (!this.nmutiple) {
        if (select_arr == '') {
          date.map(v => { v.checked = false })
        } else {
          date.filter(x => x[this.dataValue] == select_arr ? x.checked = true : x.checked = false)
          this.selectArr = [...this.selectArr, ...(date.filter(x => x.checked == true))]
        }
      } else {
        if (select_arr.length == 0) {
          date.map(v => { v.checked = false })
        } else {
          let arr = date.filter(x => select_arr.some(y => { return y == x[this.dataValue] ? x.checked = true : x.checked = false }))
          this.selectArr = [...this.selectArr, ...arr]
        }
      }
      date.map(v => {
        v.child.length > 0 && this.digui(v.child, select_arr)
      })
      this.$forceUpdate();
    },
  }
}
</script>

<style lang="less" scoped>
.lists {
  background: #fff;
  padding: 0 0 0 30upx;
}

.checkbox,
.radio {
  .label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10upx 0;
    .border-1px(bottom);

    .value {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 30upx;

      image {
        width: 24upx;
        height: 24upx;
        margin-right: 10upx;
      }
    }
  }
}

/deep/ .uni-checkbox-wrapper {
  margin-top: -8upx;
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28upx;
  padding: 20upx;
  .border-1px(bottom);
}

.pd20 {
  padding: 20upx 20upx 20upx 0;
  overflow-y: auto;
  height: calc(100% - 80upx);
}
</style>
